// 部件级样式
:root.qiao_yi {
    // 工具栏
    @include b('control-toolbar') {
        #{getCssVarName('control-toolbar-menu-height')}: getCssVar(height-control, default);
        #{getCssVarName('control-toolbar-item-margin')}: 0 6px;

        .el-button.is-disabled {
            background-color: var(--el-button-disabled-bg-color);
        }

        @include e(item) {
            &:first-child {
                margin-left: 0;
            }
        }
    }

    @include b('control-toolbar-actions') {
        &.#{bem('control-toolbar-actions__extract-mode-itemx')} {
            .el-button-group .el-button:nth-child(1) {
                .el-button {
                    color: currentcolor;
                    background-color: transparent;
                    border: none;
                }
            }
        }

        .el-dropdown .el-dropdown__caret-button.el-button::before {
            background: currentcolor;
        }
    }

    @include b('control-toolbar-actions-dropdown-popper') {
        #{getCssVarName('font-size', 'regular')}: #{getCssVar('font-size', 'header-6')};
        @include e('dropdown-item') {
            color: getCssVar(color, text, 0);
        }

        .el-button {
            color: currentcolor;
            background-color: transparent;
            border: none;

            &.is-disabled {
                color: var(--el-button-disabled-text-color);
            }
        }

        &.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item.is-disabled {
            opacity: 1;
        }
    }

    @include b('control-toolbar-submenu-popper') {
        #{getCssVarName('font-size', 'regular')}: #{getCssVar('font-size', 'header-6')};
        background-color: transparent;

        .el-menu {
            .el-menu-item {
                color: getCssVar(color, text, 0);

                &:hover:not(.is-disabled) {
                    color: getCssVar(color, primary);
                }
            }

            .el-button,
            .ibiz-control-toolbar-submenu-rawitem {
                color: currentcolor;
                border: none;
            }

            .el-button {
                background-color: transparent;

                &.is-disabled {
                    color: var(--el-button-disabled-text-color);
                }
            }
        }
    }

    // 行为组组件
    .#{bem('button-list__dropdown-popper')} {
        #{getCssVarName('font-size', 'regular')}: #{getCssVar('font-size', 'header-6')};

        .el-dropdown-menu__item:has(.is-disabled) {
            background-color: transparent;
        }

        .#{bem('button-list__item')} {
            &.el-button {
                background-color: transparent;
                border: none;
            }
        }
    }

    // 菜单
    @include b('control-appmenu') {
        #{getCssVarName('control-appmenu-icon-width')}: getCssVar(width-icon, medium);
        #{getCssVarName('control-appmenu-icon-height')}: getCssVar(width-icon, medium);
        #{getCssVarName('control-appmenu-icon-margin')}: 0 3px 0 0;
        #{getCssVarName('control-appmenu-icon-size')}: getCssVar(width-icon, medium);

        &>.el-menu {
            #{getCssVarName('control-appmenu-item-gap')}: 0;
            #{getCssVarName('control-appmenu-item-height')}: 50px;
            #{getCssVarName('control-appmenu-item-padding')}: getCssVar(spacing, base-loose);
        }

        &.is-show-collapse>.el-menu.el-menu {
            padding: 0;
        }

        &.is-scrol {
            .el-menu.el-menu--vertical {
                padding-right: 0;
            }
        }

        .el-menu--vertical .el-menu-item,
        .el-menu--vertical .el-sub-menu__title {
            border-radius: 0;
        }
    }

    // 表单分组
    @include b('form-group-header') {
        #{getCssVarName(form-group-header-height)}: 32px;
        #{getCssVarName(form-group-header-padding)}: 6px;
        #{getCssVarName(form-group-caption-font-size)}: getCssVar('font-size', 'header-6');
        #{getCssVarName(form-group-caption-font-weight)}: normal;
        border-bottom: 1px solid getCssVar(color, border, 2);
    }

    // 表单项
    @include b('form-item') {
        #{getCssVarName('form-item-text-color')}: getCssVar(color, text, 0);
    }

    // 表单项容器
    @include b(form-item-container) {
        #{getCssVarName('form-item-container-label-left-padding')}: 0 rem(10px) 0 0;
        #{getCssVarName('form-item-container-padding')}: 0 0 getCssVar(spacing, tight) 0;
        #{getCssVarName('form-item-container-label-color')}: getCssVar(color, text, 0);
    }

    // 表单按钮 上下边距与表单项容器保持一致
    @include b(form-button) {
        padding: 0 getCssVar(spacing, tight) getCssVar(spacing, tight);
        .el-button {
            vertical-align: top;
        }
    }
    @include b(form-button-list) {
        padding: 0 getCssVar(spacing, tight) getCssVar(spacing, tight);
    }

    // 用户信息
    @include b('user-info') {
        @include e('icon') {
            margin-right: getCssVar('spacing', 'extra-tight');
            font-size: getCssVar('width-icon', 'medium');
        }
    }
}